<template>
  <view class="container">
    <view class="back"></view>
    <kt-nav-bar
        ref="ktNavBarInPageAI"
        :icon="$kt.file.byPath('tabbar/ai-selected.svg')"
        :title="'AI'"></kt-nav-bar>
    <view style="height: 20rpx"></view>
    <view class="head-box">
      <view class="tag">苏格拉底之前</view>
      <view class="tag">古希腊时期</view>
      <view class="tag">中世纪</view>
      <view class="tag">文艺复兴时期</view>
      <view class="tag">启蒙运动时期</view>
    </view>
    <scroll-view class="sc_view"
    scroll-y
    :style="{
      height: `calc(100vh - ${navbarHeight}px - 20rpx - 150rpx - 120rpx - 60rpx)`
    }"
    >
      <view class="box">
        <view v-for="item in 10">
          <view class="role-box">
            <ovo-user-card></ovo-user-card>
            <!-- 支持的语言 -->
            <view class="support-language">
              <!-- 支持的语言 -->
<!--              <text class="title">{{$i18n.enToGlobal("Supported Languages")}}{{":"}}</text>-->
              <kt-one-line-text
              :font-size="'20rpx'"
              :text="$i18n.enToGlobal('Supported Languages')"
              >{{$i18n.enToGlobal("Supported Languages")}}{{":"}}</kt-one-line-text>
              <view class="language-box">
                <text
                    v-for="item in 20"
                    class="language">简体中文_zh_CN</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="bottom">
      <view style="height: 15rpx"></view>
      <!-- 创建新角色 -->
      <kt-button
          :is-open-box-shadow="false"
      >
        <view style="position: relative;width: 100%">
          <image class="btn-icon"
                 style="position: absolute;left:0"
                 :src="$kt.file.byPath('image/robot.svg')"
          ></image>

          <image class="btn-icon"
                 style="position: absolute;right:0"
                 :src="$kt.file.byPath('image/robot.svg')"
          ></image>
          <view class="btn-text">
            {{$i18n.enToGlobal("Philosophy Assistant")}}
          </view>
        </view>
      </kt-button>
    </view>
    <no-login></no-login>
  </view>
</template>

<script>

export default {
  data() {
    return {
      navbarHeight: 0
    }
  },
  created() {
  },
  mounted() {
    this.navbarHeight = this.$refs.ktNavBarInPageAI.getHeight();
  },
  methods: {


    toGoodsDetail() {
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail'
      })
    }

  }

}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: -1;
}

.cart-icon {
  width: 200rpx;
  height: 200rpx;
  opacity: .3;
}

.btn:active {
  opacity: .8;
}

.box {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}

.head-box{
  padding: 20rpx;
  box-sizing: border-box;
  // 不换行
  white-space: nowrap;
  // 滚动
  overflow-x: auto;

  .tag{
    display: inline-block;
    background-color: #F5F5F5;
    color: #AAAAAA;
    padding: 10rpx 20rpx 10rpx 20rpx;
    border-radius: 20rpx;
    font-size: 28rpx;
    margin-right: 40rpx;
  }

}

.bottom {
  position: fixed;
  width: 100%;
  padding: 20rpx 50rpx 50rpx 50rpx;
  box-sizing: border-box;
  bottom: 100rpx;
  background-color: #FFFFFF;
}

.btn-text{
  letter-spacing: 2rpx;
  font-weight: lighter;
}

.btn-icon{
  width: 40rpx;
  height: 40rpx;
}

.role-box{
  //border: 5rpx solid #f0f0f0;
  margin-bottom: 20rpx;
  padding: 10rpx;
  box-sizing: border-box;
}

.support-language{
  margin-top: -20rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  .title{
    font-size: 22rpx;
    color: #666666;
    width: 130rpx;
    vertical-align: top;
    padding: 0 5rpx;
    box-sizing: border-box;
    display: inline-block;
  }
  .language-box{
    display: inline-block;
    width: calc(100% - 140rpx);
    white-space: nowrap;
    overflow-x: auto;
    vertical-align: top;
    margin-top: -7rpx;
  }
  .language{
    color: #000000;
    display: inline-block;
    font-size: 20rpx;
    padding: 5rpx 20rpx;
    border-radius: 20rpx;
  }
}




</style>